package cn.edu.baiyunu.myapplication.ui.specs.components

import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.aspectRatio
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Person
import androidx.compose.material3.Card
import androidx.compose.material3.CardDefaults
import androidx.compose.material3.Icon
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.draw.shadow
import androidx.compose.ui.graphics.Brush
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.text.style.TextOverflow
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import cn.edu.baiyunu.myapplication.data.model.PhotoSpec
import coil.compose.AsyncImage
import coil.request.ImageRequest

/**
 * 规格卡片组件 - 带玻璃效果
 */
@Composable
fun SpecCard(
    photoSpec: PhotoSpec,
    onClick: (PhotoSpec) -> Unit,
    modifier: Modifier = Modifier
) {
    val context = LocalContext.current
    
    Card(
        modifier = modifier
            .padding(8.dp)
            .shadow(
                elevation = 4.dp,
                shape = RoundedCornerShape(16.dp),
                spotColor = Color.Black.copy(alpha = 0.07f)
            )
            .clickable { onClick(photoSpec) },
        shape = RoundedCornerShape(16.dp),
        colors = CardDefaults.cardColors(
            containerColor = Color.White.copy(alpha = 0.7f)
        ),
        elevation = CardDefaults.cardElevation(defaultElevation = 0.dp)
    ) {
        Column(
            horizontalAlignment = Alignment.CenterHorizontally,
            verticalArrangement = Arrangement.Center,
            modifier = Modifier
                .fillMaxWidth()
                .padding(16.dp)
        ) {
            // 示例图片容器
            Box(
                modifier = Modifier
                    .size(96.dp, 128.dp)
                    .clip(RoundedCornerShape(12.dp))
                    .background(
                        when (photoSpec.name) {
                            "一寸照" -> Brush.linearGradient(
                                colors = listOf(Color(0xFFF5F3FF), Color(0xFFEDE9FE)) // indigo-50 to purple-50
                            )
                            "二寸照" -> Brush.linearGradient(
                                colors = listOf(Color(0xFFF5F3FF), Color(0xFFEDE9FE)) // indigo-50 to purple-50
                            )
                            "小二寸" -> Brush.linearGradient(
                                colors = listOf(Color(0xFFFFF1F2), Color(0xFFFFE4E6)) // rose-50 to rose-100
                            )
                            "小一寸" -> Brush.linearGradient(
                                colors = listOf(Color(0xFFF0F9FF), Color(0xFFE0F2FE)) // sky-50 to sky-100
                            )
                            "护照照" -> Brush.linearGradient(
                                colors = listOf(Color(0xFFFFFBEB), Color(0xFFFEF3C7)) // amber-50 to amber-100
                            )
                            "签证照" -> Brush.linearGradient(
                                colors = listOf(Color(0xFFFFF1F2), Color(0xFFE0F2FE)) // rose-50 to sky-100
                            )
                            else -> Brush.linearGradient(
                                colors = listOf(Color(0xFFF5F3FF), Color(0xFFEDE9FE)) // indigo-50 to purple-50
                            )
                        }
                    ),
                contentAlignment = Alignment.Center
            ) {
                // 如果有实际图片路径，则加载图片
                val imageResId = photoSpec.imageSample.toIntOrNull()
                
                if (imageResId != null) {
                    // 使用渐变色人头像而非实际图片
                    Box(
                        modifier = Modifier
                            .size(64.dp, 96.dp)
                            .clip(RoundedCornerShape(8.dp))
                            .background(
                                Brush.verticalGradient(
                                    colors = when (photoSpec.name) {
                                        "一寸照" -> listOf(Color(0xFF6366F1), Color(0xFFA5B4FC)) // indigo-500 to indigo-300
                                        "二寸照" -> listOf(Color(0xFF8B5CF6), Color(0xFFC4B5FD)) // violet-500 to violet-300
                                        "小二寸" -> listOf(Color(0xFFF43F5E), Color(0xFFFDA4AF)) // rose-500 to rose-300
                                        "小一寸" -> listOf(Color(0xFF0EA5E9), Color(0xFF7DD3FC)) // sky-500 to sky-300
                                        "护照照" -> listOf(Color(0xFFF59E0B), Color(0xFFFCD34D)) // amber-500 to amber-300
                                        "签证照" -> listOf(Color(0xFFEC4899), Color(0xFFF9A8D4)) // pink-500 to pink-300
                                        else -> listOf(Color(0xFF8B5CF6), Color(0xFFC4B5FD)) // violet-500 to violet-300
                                    }
                                )
                            ),
                        contentAlignment = Alignment.Center
                    ) {
                        Icon(
                            imageVector = Icons.Default.Person,
                            contentDescription = null,
                            tint = Color.White,
                            modifier = Modifier.size(48.dp)
                        )
                    }
                } else {
                    // 占位图标 - 使用渐变色背景
                    Box(
                        modifier = Modifier
                            .size(64.dp, 96.dp)
                            .clip(RoundedCornerShape(8.dp))
                            .background(
                                Brush.verticalGradient(
                                    colors = when (photoSpec.name) {
                                        "一寸照" -> listOf(Color(0xFF6366F1), Color(0xFFA5B4FC)) // indigo-500 to indigo-300
                                        "二寸照" -> listOf(Color(0xFF8B5CF6), Color(0xFFC4B5FD)) // violet-500 to violet-300
                                        "小二寸" -> listOf(Color(0xFFF43F5E), Color(0xFFFDA4AF)) // rose-500 to rose-300
                                        "小一寸" -> listOf(Color(0xFF0EA5E9), Color(0xFF7DD3FC)) // sky-500 to sky-300
                                        "护照照" -> listOf(Color(0xFFF59E0B), Color(0xFFFCD34D)) // amber-500 to amber-300
                                        "签证照" -> listOf(Color(0xFFEC4899), Color(0xFFF9A8D4)) // pink-500 to pink-300
                                        else -> listOf(Color(0xFF8B5CF6), Color(0xFFC4B5FD)) // violet-500 to violet-300
                                    }
                                )
                            ),
                        contentAlignment = Alignment.Center
                    ) {
                        Icon(
                            imageVector = Icons.Default.Person,
                            contentDescription = null,
                            tint = Color.White,
                            modifier = Modifier.size(48.dp)
                        )
                    }
                }
            }
            
            // 规格名称
            Text(
                text = photoSpec.name,
                style = MaterialTheme.typography.bodyLarge,
                fontWeight = FontWeight.Medium,
                textAlign = TextAlign.Center,
                color = Color(0xFF334155), // slate-700
                maxLines = 1,
                overflow = TextOverflow.Ellipsis,
                modifier = Modifier.padding(top = 12.dp)
            )
            
            // 规格尺寸
            Text(
                text = photoSpec.description,
                style = MaterialTheme.typography.bodySmall,
                fontSize = 12.sp,
                textAlign = TextAlign.Center,
                color = Color(0xFF64748B), // slate-500
                maxLines = 1,
                overflow = TextOverflow.Ellipsis,
                modifier = Modifier.padding(top = 4.dp)
            )
        }
    }
}

/**
 * 规格信息组件 - 带类别标签
 */
@Composable
fun SpecItemWithCategory(
    photoSpec: PhotoSpec,
    categoryName: String,
    onClick: (PhotoSpec) -> Unit,
    modifier: Modifier = Modifier
) {
    Card(
        modifier = modifier
            .fillMaxWidth()
            .padding(vertical = 6.dp)
            .shadow(2.dp, RoundedCornerShape(12.dp))
            .clickable { onClick(photoSpec) },
        shape = RoundedCornerShape(12.dp),
        colors = CardDefaults.cardColors(
            containerColor = Color.White
        )
    ) {
        Box(
            modifier = Modifier
                .fillMaxWidth()
                .background(
                    when (categoryName) {
                        "国内证件" -> Brush.linearGradient(
                            colors = listOf(
                                Color(0xFFEEF2FF).copy(alpha = 0.3f),
                                Color(0xFFE0E7FF).copy(alpha = 0.3f)
                            )
                        )
                        "国际签证" -> Brush.linearGradient(
                            colors = listOf(
                                Color(0xFFFFF7ED).copy(alpha = 0.3f),
                                Color(0xFFFFEDD5).copy(alpha = 0.3f)
                            )
                        )
                        "求职简历" -> Brush.linearGradient(
                            colors = listOf(
                                Color(0xFFFEF2F2).copy(alpha = 0.3f),
                                Color(0xFFFEE2E2).copy(alpha = 0.3f)
                            )
                        )
                        else -> Brush.linearGradient(
                            colors = listOf(
                                Color(0xFFF8FAFC).copy(alpha = 0.3f),
                                Color(0xFFF1F5F9).copy(alpha = 0.3f)
                            )
                        )
                    }
                )
                .padding(16.dp)
        ) {
            Column {
                Text(
                    text = photoSpec.name,
                    style = MaterialTheme.typography.titleMedium,
                    fontWeight = FontWeight.Medium,
                    color = Color(0xFF334155) // slate-700
                )
                
                Text(
                    text = "${photoSpec.description} | ${categoryName}",
                    style = MaterialTheme.typography.bodySmall,
                    color = Color(0xFF64748B), // slate-500
                    modifier = Modifier.padding(top = 4.dp)
                )
            }
        }
    }
} 